<template>
    <div class="content">
        <a-card class="card" style="overflow: auto">
            <div class="header">
                <div class="button">
                    <a-space>
<!--                        <a-button type="primary">新增</a-button>-->
                        <a-popconfirm title="确定要删除日志吗?"
                                      ok-text="Yes"
                                      cancel-text="No"
                                      @confirm="confirm(1)"
                                      @cancel="cancel(1)">
                            <a-button type="primary" danger>删除</a-button>
                        </a-popconfirm>
                        <a-popconfirm title="确定要清空日志吗?"
                                      ok-text="Yes"
                                      cancel-text="No"
                                      @confirm="confirm(2)"
                                      @cancel="cancel(2)">
                            <a-button type="primary" danger>清空日志</a-button>
                        </a-popconfirm>
<!--                        <a-button type="primary" danger>清空日志</a-button>-->
                    </a-space>

                </div>
                <div class="searchForm">
<!--                    <a-form :model="searchForm">-->
<!--                        <a-form-item label="">-->
<!--                            <a-input-search-->
<!--                                v-model:value="searchForm.name"-->
<!--                                placeholder="请输入名称"-->
<!--                                enter-button="搜索"-->
<!--                                size="large"-->
<!--                                @search="onSearch"-->
<!--                            />-->
<!--                        </a-form-item>-->
<!--                    </a-form>-->
                </div>
            </div>
            <div class="tableBox" >
                <a-table :loading="loading"
                         :dataSource="tableData"
                         :row-selection="rowSelection"
                         :rowKey="(record , index) => {return record.id}"
                         :pagination="pagination"
                         :indentSize="2000"
                         @change="changeTable"
                         :columns="columns">
                    <template #button="{ text}">
                        <span style="color: #4EB1F7" v-if="text">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>

                </a-table>
            </div>
        </a-card>
    </div>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted} from "vue";
import {message} from "ant-design-vue";
import {getLogList, deleteAllList, deleteList} from "../../../api";

export default defineComponent({
    name: "index",
    setup() {
        const tableDataObj = reactive({
            loading: false,
            tableData: [
                {}
            ],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            columns: [
                {
                    title: "序号",
                    // width: 50,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "操作者",
                    dataIndex: "operator",
                    key: "operator",
                    align: 'center',
                    // width: 120,
                    ellipsis: true
                },
                {
                    title: "操作内容",
                    dataIndex: "content",
                    align: 'center',
                    // width: 160,
                    key: "content",
                    ellipsis: true
                },
                {
                    title: "访问ip",
                    dataIndex: "ip",
                    key: "ip",
                    align: 'center',
                    // width: 150,
                    ellipsis: true
                },

                {
                    title: "操作时间",
                    dataIndex: "updateTime",
                    align: 'center',
                    key: "updateTime",
                    ellipsis: true
                }
            ]
        })
        const searchForm = reactive({
            name: ''
        })
        // table 行选择
        const rowSelection = reactive({
            selectedRowKeys: [],
            onChange: (selectedRowKeys, selectedRows) => {
                rowSelection.selectedRowKeys = selectedRowKeys
                console.log(rowSelection.selectedRowKeys)
            }
        })

        // 获取日志
        const getLogs = () => {
            const params = {
                operator: 'admin',
                limit: tableDataObj.pagination.pageSize,
                page: tableDataObj.pagination.current
            }
            getLogList(params).then((res) => {
                console.log('商家列表为', res.data)
                if (res.data.code == 200) {
                    tableDataObj.tableData = res.data.data.list
                    tableDataObj.pagination.total = res.data.data.totalCount
                }
            })
            // tableDataObj.tableData = [{},{}]
        }

        // 取消删除
        const cancel = (val) => {
            if (val == 1) {
                message.error('取消删除')
            }
            if (val == 2) {
                message.error('取消清空')
            }
        }
        const confirm = (val) => {
            if (val == 1) {
                if (rowSelection.selectedRowKeys.length === 0) {
                    message.warning('请先选择数据')
                    return
                }
                // 调用删除接口
                deleteList(rowSelection.selectedRowKeys).then((res)=> {
                    if (res.data.code == 200) {
                        message.success('删除成功')
                        getLogs()
                    }
                })
            }
            if (val == 2) {
                deleteAllList({}).then((res) => {
                    if (res.data.code == 200) {
                        message.success('清空成功')
                        getLogs()
                    }
                })
            }
        }



        // 分页
        const changeTable = (pagination) => {
            console.log('qwe', pagination)
            tableDataObj.pagination.pageSize = pagination.pageSize
            tableDataObj.pagination.current = pagination.current
            getLogs()
        }
        onMounted(()=> {
            getLogs()
        })
        return{
            ...toRefs(tableDataObj),
            searchForm,
            rowSelection,
            confirm,
            cancel,
            changeTable
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;

            .button {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 15px;
            }
        }
    }
}
</style>